import './index.scss'
import { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { getArticleByIdApi } from '@/apis/article'

const Article = () => {

    const [searchPatams] = useSearchParams()
    const articleId = searchPatams.get('id')
    const [imageList, setImageList] = useState([])
    const [articleList, setArticleList] = useState([])

    useEffect(() => {
        async function getArticleDetail() { 
          const res = await getArticleByIdApi(articleId)
          setArticleList({
            ...res.data,
            type: res.data.cover.type
          })
          setImageList(res.data.cover.images.map(item => ({ url: item })))
          // console.log(imageList);
        }
        if (articleId) getArticleDetail()
      },[articleId])

      console.log(imageList);

    return (
        <div>
            <a href="/" class="btn btn-back" style={{ display: 'block', margin: '20px 30px'}}>返回博客列表</a>
            <div class="container">
                <h1 class="article-title">{articleList.title}</h1>
                <div class="article-meta">
                    发布于：{articleList.pub_date} | 作者：张三 | 阅读量：1.2k | 点赞数：230
                </div>
                <div class = "article-img">
                {imageList.length > 0 && (
                    imageList.map((item, index) => <img src={item.url} key={index} alt="" />)
                )}
                </div>
                <div class="article-content" dangerouslySetInnerHTML= {{__html: articleList.content}}>
                </div>
            </div>
        </div>
    )
}

export default Article; // Export the Article component as the default export of the module